<template>
	<view class="u-page">
		<view class="u-demo-block">
			<text class="head" style="">缴费项目</text>
			<view class="u-demo-block__content">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view class="demo-layout bg-purple-light"
							style="display: flex; flex-direction: column; align-items: center; padding: 10px;">
							<!-- 图标 -->
							<u-icon
								name="https://th.bing.com/th/id/R.c61185940d677ff7c4d91d94cf6dc3d0?rik=kzFxpv97igtnyw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f52%2f49%2fjzXF7iYs6t.jpg&ehk=4Fvpa2bgvbnY7Z1%2f%2fTud3vFTYADrmq4n0sQA35B6ftk%3d&risl=&pid=ImgRaw&r=0"
								size="40px" style="margin-bottom: 10px;">
							</u-icon>
							<!-- 文本 -->
							<view style="margin-bottom: 10px;">电费</view>
							<!-- 按钮 -->
							<u-button type="primary" text="立即缴费" style="width: 70px;"
								@click="insertElectricityFeeFun()"></u-button>
						</view>
					</u-col>

					<u-col span="4">
						<view class="demo-layout bg-purple-light"
							style="display: flex; flex-direction: column; align-items: center; padding: 10px;">
							<!-- 图标 -->
							<u-icon
								name="https://th.bing.com/th/id/R.c61185940d677ff7c4d91d94cf6dc3d0?rik=kzFxpv97igtnyw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f52%2f49%2fjzXF7iYs6t.jpg&ehk=4Fvpa2bgvbnY7Z1%2f%2fTud3vFTYADrmq4n0sQA35B6ftk%3d&risl=&pid=ImgRaw&r=0"
								size="40px" style="margin-bottom: 10px;">
							</u-icon>
							<!-- 文本 -->
							<view style="margin-bottom: 10px;">水费</view>
							<!-- 按钮 -->
							<u-button type="primary" text="立即缴费" style="width: 70px;"
								@click="insertWaterFeeFun()"></u-button>
						</view>
					</u-col>

					<u-col span="4">
						<view class="demo-layout bg-purple-light"
							style="display: flex; flex-direction: column; align-items: center; padding: 10px;">
							<!-- 图标 -->
							<u-icon
								name="https://th.bing.com/th/id/R.c61185940d677ff7c4d91d94cf6dc3d0?rik=kzFxpv97igtnyw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f52%2f49%2fjzXF7iYs6t.jpg&ehk=4Fvpa2bgvbnY7Z1%2f%2fTud3vFTYADrmq4n0sQA35B6ftk%3d&risl=&pid=ImgRaw&r=0"
								size="40px" style="margin-bottom: 10px;">
							</u-icon>
							<!-- 文本 -->
							<view style="margin-bottom: 10px;">校园卡</view>
							<!-- 按钮 -->
							<u-button type="primary" text="立即缴费" style="width: 70px;"
								@click="insertCampusCardFeeFun()"></u-button>
						</view>
					</u-col>
				</u-row>

			</view>
		</view>

		<view>
			<chachartVue></chachartVue>
		</view>

		<!-- 电 -->
		<view>
			<u-popup :show="electricityShow" mode="center" @close="close" @open="open">
				<view style="width: 300px;height: 200px;" class="uppo">
					<view>
						<view style="padding-left: 35px;padding-top: 20px;">充值缴费</view>
						<view style="display: flex;padding-left: 3px;padding-top: 17px;"> <u-input placeholder="请输入缴纳金额"
								border="surround" v-model="electricityFee"></u-input></view>
					</view>
					<view> <u-button text="确认" @click="insertElectricityFeeFun()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 水 -->
		<view>
			<u-popup :show="waterShow" mode="center" @close="close" @open="open">
				<view style="width: 300px;height: 200px;" class="uppo">
					<view>
						<view style="padding-left: 35px;padding-top: 20px;">充值缴费</view>
						<view style="display: flex;padding-left: 3px;padding-top: 17px;"> <u-input placeholder="请输入缴纳金额"
								border="surround" v-model="waterFee"></u-input></view>

					</view>
					<view> <u-button text="确认" @click="insertWaterFeeFun()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 校园卡 -->

		<view>
			<u-popup :show="campusCardShow" mode="center" @close="close" @open="open">
				<view style="width: 300px;height: 200px;" class="uppo">
					<view>
						<view style="padding-left: 35px;padding-top: 20px;">充值缴费</view>
						<view style="display: flex;padding-left: 3px;padding-top: 17px;"> <u-input placeholder="请输入缴纳金额"
								border="surround" v-model="campusCardFee"></u-input></view>

					</view>
					<view style="margin-top: 40px;"> <u-button text="确认" @click="insertCampusCardFeeFun()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>

	</view>


</template>

<script>
	import chartVue from "../charts/chart.vue";
	import rechargeInfo from "@/api/campus/index.js"

	export default {
		components: {
			chachartVue: chartVue, // 注册别名
		},


		data() {
			return {
				electricityShow: false,
				waterShow: false,
				campusCardShow: false,
				electricityFee: 0,
				waterFee: 0,
				campusCardFee: 0
			}
		},
		methods: {
			close() {
				this.electricityShow = false
				this.waterShow = false
				this.campusCardShow = false
			},

			async insertElectricityFeeFun() {
				// 			try {
				// 				let insertResponse = await rechargeInfo.insertElectricityFee(this.electricityFee)
				// 				// 关闭弹框
				// 				this.electricityShow = false
				// 				this.electricityFee=0

				// 			} catch (error) {
				// 			}
				uni.navigateTo({
					url: '/pages/payment/electricityFee/electricityFee',
				});
			},
			async insertWaterFeeFun() {
				// try {
				// 	let insertResponse = await rechargeInfo.insertWaterFee(this.waterFee)
				// 	// 关闭弹框
				// 	this.waterShow = false
				// 	this.waterFee=0


				// } catch (error) {
				// }
				uni.navigateTo({
					url: '/pages/payment/waterFee/waterFee',
				});
			},
			async insertCampusCardFeeFun() {
				// try {
				// 	console.log(2931)
				// 	let insertCardResponse = await rechargeInfo.insertCampusCard(this.campusCardFee)
				// 	this.campusCardFee= 0

				// 	// 关闭弹框
				// 	this.campusCardShow = false
				// } catch (error) {


				// }

				uni.navigateTo({
					url: '/pages/payment/recharge/recharge',
				});
			}
		}



	};
</script>

<style lang="scss">
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 170px;
		width: 32vw;
		border-radius: 4px;
		margin-left: 10px;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.head {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.item {}
</style>
